<template>
  <div class="detail content">
    <el-card class="card">
      <el-button
        v-if="active === 't2' || active === 't3'"
        class="print-btn"
        type="primary"
        size="small"
        @click="btnClick"
        >打印</el-button
      >
      <el-tabs v-model="active">
        <el-tab-pane label="登陆帐户设置" name="t1">
          <el-form
            class="form"
            label-width="120px"
            :model="form"
            :rules="rules"
            ref="form"
          >
            <el-form-item label="姓名：" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">更新</el-button>
              <el-button @click="backEvent">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 
         先完成上部分个人详情
        1:完成布局（笔记上有，所以直接使用笔记的）
           抽离 出个人详情组件再导入使用
        2：值的回显（值的绑定）
        3实现修改功能

         -->
        <el-tab-pane label="个人详情" lazy name="t2">
          <Info :userInfo="userInfo"></Info>
        </el-tab-pane>
        <!-- 
        1:创建相应组件
        2：导入使用
        3：完成结构（复制相应的代码进去）
        4：完成数据显示
           a:定义api
           b：导入与调用并对应字段
        5：完成修改
           a:定义api
           b:导入，与调用（点击确定时调用）

         -->
        <el-tab-pane label="岗位信息" lazy name="t3">
          <Job></Job>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 打印
    1:创建一个打印页面
    2:完成路由配制
    3:需要完成内容的结构(笔记)
    4:分为个人详情与岗位信息的打印
    5:处理好个人详情与岗位信息的跳转入口,,在打印页面打印时,能区分个人详情与岗位信息
      a:加入打印按钮
      b:区分当前是详情的tab还是岗位的tab
      c:通过路由传参告诉打印页面是详情还是岗位
      d:打印页面通过接收路由传参区分详情与岗位的展示 
    6:数据处理
      a:导入与调用相应api接口获取数据并渲染
      b:区分二个场景:个人详情/岗位详情
    7:实现打现
       a:加入打印按钮
       b:引入 插件
          vue-print-nb
          1:安装  npm i vue-print-nb
          2:在main.js全局注册  
             import PringNb from 'vue-print-nb'
             Vue.use(PringNb)
          3:使用
              自定义指令  
                 a:在相应打印按钮加入  v-print="{id:需要打印区域的dom的id}"
                 b:在想打印的区域的dom上加入id

    
     -->
  </div>
</template>
<script>
import { sysUser } from '@/api/user'
import Info from './components/Info.vue'
import { sysUserPut } from '@/api/employees'
import Job from './components/Job.vue'
export default {
  components: {
    Info,
    Job
  },
  data () {
    return {
      active: 't1',
      id: this.$route.query.id,
      userObj: '', // 用户的基本信息
      userInfo: '',
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '必填', trigger: 'change' }],
        password: [
          { required: true, message: '必填', trigger: 'change' },
          { min: 6, max: 12, message: '请输入6-12位密码', trigger: 'change' }
        ]
      }
    }
  },
  async created () {
    this.userObj = await sysUser(this.id)
    this.userInfo = JSON.parse(JSON.stringify(this.userObj))
    // this.userInfo = this.userObj
    window.console.log(this.userObj)
    this.form.username = this.userObj.username
  },
  methods: {
    async submit () {
      //   try {
      //     const result = await this.$refs.form.validate()
      //     if (result) {
      //       await sysUserPut({ ...this.userObj, ...this.form })
      //       this.$message.success('修改成功')
      //     }
      //   } catch {
      //     this.$message.error('验证失败')
      //   }
      this.$refs.form.validate(async result => {
        if (result) {
          await sysUserPut({ ...this.userObj, ...this.form })
          this.$message.success('修改成功')
        } else {
          this.$message.error('验证失败')
        }
      })
    },
    backEvent () {
      this.$router.push('/employees')
    },
    // 打印按钮跳转 带上type(是个人详情还是岗位详情区分的参数)与id
    btnClick () {
      this.$router.push(
        '/employees/print?type=' + this.active + '&id=' + this.id
      )
      window.console.log(this.active)
    }
  }
}
</script>
<style lang="scss" scoped>
.detail {
  .form {
    width: 500px;
    margin: 40px auto;
  }
  .card {
    position: relative;
    .print-btn {
      position: absolute;
      right: 15px;
      top: 18px;
      z-index: 999;
    }
  }
}
</style>
